<template>

    <ul class="detail-ul">
        <li class="detail-li"
            v-for="todo of item"
            :key = "todo.id"
            @click="add(todo.id)"
        >
            <img class="detail-li-img" :src="todo.image" />
            <span class="detail-li-title">{{todo.title}}</span>
            <span class="detail-li-price">{{todo.originPrice}}</span>
        </li>
    <!-- <div v-if="$route.params.list==='a'">衣服详情{{detail}}</div>
      <div v-if="$route.params.list==='b'">裤子详情{{detail}}</div>
      <div v-if="$route.params.list==='c'">包详情</div> -->
    </ul>
</template>

<script>
export default {
    props:['detail'],
    methods:{
        add(id){
            this.$router.history.push(`/product/${id}`)
            console.log(id)
        }
    },
    data(){
        return {
            item:[]
        }
    },
    created(){
         console.log(this.$route.params.list)
        console.log(this)
        this.$http.get(`http://www.xiongmaoyouxuan.com/api/category/${this.detail}/items?start=0`)
        
           .then(resp=>{
                console.log(resp)
                this.item=resp.data.data.items.list
                console.log(resp.data.data.items.list)
            })
    }
}
</script>

<style lang="scss" scoped>
    .detail-ul{
        height: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        overflow-x: hidden;
flex: 1;
    }
    .detail-li{
        height: 257px;
        width: 180px;
        border: 1px solid red;
        display: flex;
       
        flex-direction: column;
        &-img{
            height:179px;
            width:179px;
            border-bottom: 1px solid red;
        }
        &-title{
                overflow: hidden;
                font-size: 14px;
                line-height: 15px;
                text-overflow: ellipsis;
                color: #877a73;
                white-space: nowrap;
        }
        &-price{
                display: inline-block;
                font-size:18px;
               
        }
    }
</style>
